import { View, Text,Image } from '@tarojs/components'
import Taro,{ useLoad, useUnload } from '@tarojs/taro'
import './index.scss'
import { useState } from 'react'


export default function JiFenBaoMing () {
  const [areaDetail, setAreaDetail] = useState<any>({})
 
  function getBtnName() {
    if(areaDetail.status === 2){
      return '报名已截止'
    }
    if(areaDetail.joinFlag === 0){
      return '报名参与'
    }else {
      return '已报名'
    }
  }
  function jumpToSelectMerchantPage(){
    if(areaDetail.joinFlag === 0 && areaDetail.status ===1){
      Taro.navigateTo({
        url:'/pages/selectMerchant/index?areaId='+areaDetail.id
      })
    }
    
  }
  function getShortDate(date) {
    if(date){
      let dateList = date.split(/\s+/)
      if(dateList.length > 0 ){
        return dateList[0]
      }else{
        return date
      }
    }
    
  }
  useLoad((options) => {
    
    console.log('Page loaded.options :',options)
    // @ts-ignore
    const pages = getCurrentPages()
    const current = pages[pages.length - 1]
    const eventChannel = current.getOpenerEventChannel()
    eventChannel.on('baoMingAddressData',(data)=>{
      // console.log(' eventChannelbaoMingAddressData :',data)
      data.imageOneList = data.imageOne.split(',')
      data.imageTwoList = data.imageTwo.split(',')
      console.log('eventChannelbaoMingAddressData :',data)
      setAreaDetail(data)
    })
    

  })
  
  

  return (
    <View className='jiFenBaoMing'>
      {
        areaDetail.imageOneList && areaDetail.imageOneList.map((item,index)=>{
          return <View className='img-wrap img-wrap1'>
            <Image src={item} className='img' mode='widthFix' />
          </View>
        })
      }
      
      <View className='info'>
        <View className='info-item'>
          <View className='label'>报名截止日期</View>
          <View className='value'>{getShortDate(areaDetail.endTime)}</View>
        </View>
        <View className='info-item'>
          <View className='label'>积分发放日期</View>
          <View className='value'>{getShortDate(areaDetail.pointsIssueDate)}</View>
        </View>
        <View className='info-item'>
          <View className='label'>医保代缴周期</View>
          <View className='value'>{getShortDate(areaDetail.insuranceStartDate)}至{getShortDate(areaDetail.insuranceEndDate)}</View>
        </View>
      </View>
    
     
      {
          areaDetail.imageTwoList && areaDetail.imageTwoList.map((item,index)=>{
            return  <View className='img-wrap img-wrap2'>
              <Image src={item} className='img' mode='widthFix' />
            </View>
          })
        }
      <View className={['fixed-bottom-btn'].join(' ')} >
        <View className={['inner',`status${areaDetail.status}`, areaDetail.joinFlag === 0 ? '' : 'disabled'].join(' ')} onClick={jumpToSelectMerchantPage}>
          { getBtnName()}
        </View>

      </View>
      
    </View>
  )
}
